<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">
<body>
	<ui:composition>
		<p:fieldset legend="Add Item" toggleable="true" toggleSpeed="500" collapsed="true">
			<h:form id="form">
				<p:dataTable var="item" value="#{dtMasterItemLazyView.lazyModel}"
					paginator="true" rows="10"
					paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
					rowsPerPageTemplate="5,10,15" selectionMode="single"
					selection="#{dtMasterItemLazyView.selectedItem}" id="itemTable"
					lazy="true">
					<p:ajax event="rowSelect"
						listener="#{dtMasterItemLazyView.onRowSelect}"
						update=":form:itemDetail" oncomplete="PF('itemDialog').show()" />
					<p:column headerText="Id" sortBy="#{item.id}" filterBy="#{item.id}">
						<h:outputText value="#{item.id}" />
					</p:column>
					<p:column headerText="Name" sortBy="#{item.name}"
						filterBy="#{item.name}">
						<h:outputText value="#{item.name}" />
					</p:column>
					<p:column headerText="Description" sortBy="#{item.description}"
						filterBy="#{item.description}">
						<h:outputText value="#{item.description}" />
					</p:column>
					<p:column headerText="Brand Seller" sortBy="#{item.seller.name}"
						filterBy="#{item.seller.name}">
						<h:outputText value="#{item.seller.name}" />
					</p:column>
				</p:dataTable>

				<p:dialog header="Master Item Detail" widgetVar="itemDialog"
					modal="true" showEffect="fade" hideEffect="fade" resizable="false">
					<p:outputPanel id="itemDetail" style="text-align:center;">
						<p:panelGrid columns="2"
							rendered="#{not empty dtMasterItemLazyView.selectedItem}"
							columnClasses="label,value">
							<f:facet name="header">
								<h:outputText value="Master Item" />
							</f:facet>

							<h:outputText value="Id:" />
							<h:outputText value="#{dtMasterItemLazyView.selectedItem.id}" />

							<h:outputText value="Name" />
							<h:outputText value="#{dtMasterItemLazyView.selectedItem.name}" />

							<h:outputText value="Description:" />
							<h:outputText
								value="#{dtMasterItemLazyView.selectedItem.description}" />

							<h:outputText value="Seller:" />
							<h:outputText
								value="#{dtMasterItemLazyView.selectedItem.seller.displayName}" />
								
							<h:outputText value="Quantity:" />
							<h:inputText
								value="#{dtMasterItemLazyView.quantity}" />
								
							<h:outputText value="Unit:" />
							<p:selectOneMenu id="city" value="#{dtMasterItemLazyView.unitCode}"
								effect="fold" editable="true">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{dtMasterItemLazyView.selectedItem.allowedUnits}" 
									var="unit" itemValue="#{unit.code}" itemLabel="#{unit.description} (#{unit.abbreviation})"/>
							</p:selectOneMenu>
							<h:outputText value="Remarks" />
							<h:inputText
								value="#{dtMasterItemLazyView.remarks}" />
							<f:facet name="footer">
								<p:commandButton value="Submit Item" id="nonAjax" action="#{dtMasterItemLazyView.addItem}" ajax="false" />
							</f:facet>
						</p:panelGrid>
						
					</p:outputPanel>
				</p:dialog>
			</h:form>
		</p:fieldset>
	</ui:composition>
</body>
</html>